<!--
 * @Description: 老师盒子，有图
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2020-12-07 16:09:00
 * @LastEditors: Seven
 * @LastEditTime: 2020-12-15 13:35:20
-->
<template>
    <div class="teacher-box">
        <div class="img-box">
            <img :src="IMG_URL + data.img" alt="" />
        </div>
        <div class="info-box">
            <div class="name line-over-1">{{ data.name }}</div>
            <div class="infos">
                {{ data.des }}
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        data: {
            type: Object,
            default: ()=>{}
            // img: "",
            // name: "",
            // info: "",
            // infos:''
        },
    }
};
</script>

<style lang="scss" scoped>
.teacher-box {
    background-color: #ffffff;
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
    display: block;
    .img-box {
        height: 0;
        padding-bottom: 73%;
        overflow: hidden;
        img {
            width: 100%;
        }
    }
    .info-box {
        text-align: left;
        padding: 0 15px;
        overflow: hidden;
        height: 175px;
        .name {
            font-size: 24px;
            color: #333333;
            margin-top: 14px;
        }
        .infos {
            font-size: 16px;
            color: #A1A1A1;
            margin-top: 14px;
            line-height: 30px;
            @include line-over(3)
        }
    }
}

@media screen and (max-width: 760px) {
    .containers-warp {
        margin-top: 8.684vw;
        margin-bottom: 26.316vw;
    }
    .teacher-box {
        margin-bottom: 2.632vw;
        .info-box {
            padding: 0 1.974vw;
            height: 25.026vw;
            .name {
                font-size: 14px;
                margin-top: 1.842vw;
            }
            .infos {
                font-size: 2.105vw;
                margin-top: 1.842vw;
                line-height: 3.947vw;
            }
        }
    }
}
</style>